import React, { Component } from 'react'
import { Select, Row, Col, Pagination } from 'antd'
import { actions } from 'mirrorx'
import api from '../../api'
import T from '../../lib/T'
import { ClaimTypes } from './Dictionaries'

const Option = Select.Option

class Claim extends Component {
  constructor (props) {
    super(props)
    this.state = {
      claimList: [],
      pageModel: {},
      insList: [] // 保险公司列表
    }
    this.filterModel = {
      condition: {},
      pageIndex: 1,
      pageSize: 10
    }
  }

  componentDidMount () {
    this.queryClaim()
    this.getInsurerList(this)
  }

  getInsurerList (scope) {
    const queryDTO = T.ajax({
      url: api.getInsurerList.path
    })
    queryDTO.then((model) => {
      const insList = model.data || []
      if (insList.length > 0) {
        scope.setState({
          insList: insList
        })
      }
    })
  }

  /**
   * 查看详情
   * @memberof Claim
   */
  claimDetail (claimId) {
    window.open('/page-claim-detail?claimId=' + claimId)
  }

  /**
   *查询理赔数据
   * @memberof Claim
   */
  queryClaim () {
    const queryDTO = T.ajax({
      url: api.queryClaimPage.path,
      data: this.filterModel
    })
    queryDTO.then((model) => {
      const claimDTO = model.data || {}
      // 放入state 进行渲染
      this.setState({
        claimList: claimDTO.rows || [],
        pageModel: {
          pageSize: claimDTO.pageSize, // 每页条数
          rowTotal: claimDTO.rowTotal, // 总共行数
          pageIndex: claimDTO.pageIndex // 当前页数
        }
      })
    })
  }

  /**
   * 条件筛选方法
   * @memberof Claim
   */
  claimFilter (key, value) {
    // 分页筛选+条件筛选 用同一个筛选方法
    if (key !== 'page') {
      // 初始化分頁為第一頁
      this.filterModel.pageIndex = 1
      this.filterModel.condition[key] = value
    } else {
      this.filterModel.pageIndex = value
    }
    this.queryClaim()
  }

  render () {
    return (
      <div>
        <div className='claim-content-box'>
          {/* begin 筛选盒子 */}
          <div className='claim-filter-box'>
            <Select dropdownClassName='claim-dropdown' className='claim-filter' placeholder='Status' onSelect={this.claimFilter.bind(this, 'status')}>
              <Option value='0'>All</Option>
              <Option value='1'>Pending</Option>
              <Option value='2'>Processed</Option>
            </Select>
            <Select dropdownClassName='claim-dropdown' className='claim-filter' placeholder='Insurer' onSelect={this.claimFilter.bind(this, 'insurerId')}>
              <Option value=''>All</Option>
              {
                this.state.insList.map((item) => {
                  return (
                    <Option key={item.insurerId} value={item.insurerId}>{item.insurerName}</Option>
                  )
                })
              }
            </Select>
            <Select dropdownClassName='claim-dropdown' className='claim-filter' placeholder='Nature of Claim' onSelect={this.claimFilter.bind(this, 'claimType')}>
              <Option value=''>All</Option>
              <Option value='1'>Property</Option>
              <Option value='2'>Health</Option>
            </Select>
          </div>
          {/* end 筛选盒子 */}
          {/* begin 列表盒子 */}
          <div className='claim-container-box' >
            <div className='claim-item-box'>
              {
                this.state.claimList.length > 0
                  ? this.state.claimList.map((item, index) => {
                    return (
                      <div className='claim-item' key={item.id} onClick={this.claimDetail.bind(this, item.id)}>
                        <div className={'item-top' + (item.status == '1' ? ' claim-pending' : ' claim-processed')}>
                          <span className='name-lable'>Insured Name:</span>
                          <span className='name-text'>{item.insuredName}</span>
                        </div>
                        <div className='item-text' >
                          <Row>
                            <Col span={8}>
                              <Row>
                                <Col className='title'>Nature of Claim</Col>
                                <Col className='text'>{ClaimTypes[item.claimType]}</Col>
                              </Row>
                            </Col>
                            <Col span={8}>
                              <Row>
                                <Col className='title'>Claim Amount($)</Col>
                                <Col>{parseFloat(item.claimAmount).toLocaleString()}</Col>
                              </Row>
                            </Col>
                            <Col span={8}>
                              <Row>
                                <Col className='title'>Insurer</Col>
                                <Col className='text'>{item.insurerName}</Col>
                              </Row>
                            </Col>
                          </Row>
                        </div>
                      </div>
                    )
                  })
                  : <div className='claim-list-empty'>No Data</div>
              }
            </div>
          </div>
          {/* end 列表盒子 */}
          {/* begin 分页盒子 */}
          {
            this.state.claimList.length > 0
              ? <div className='claim-pagination-box'>
                <Pagination showQuickJumper pageSize={this.state.pageModel.pageSize} current={this.state.pageModel.pageIndex} total={this.state.pageModel.rowTotal} onChange={this.claimFilter.bind(this, 'page')} />
              </div>
              : ''
          }

          {/* end 分页盒子 */}
        </div>
      </div>
    )
  }
}

export default Claim
